<template>
	<view style="margin: 0 27rpx; border-radius: ;">
		<view class="head">
			<view class="balance">剩余余额</view>
			<view class="number">345.23</view>
			<view class="line"></view>
			<view class="tal">累计余额<span style="color: #fff; padding-left: 15rpx;">1238.2</span></view>
			<view class="tixian" @click="withdraw">提现</view>
		</view>
		<view class="select">
			<view class="">
				<u-tabs lineHeight=0 :list="list1" @click="click" :activeStyle="{
								color: '#303133',
								fontWeight: 'bold',
								transform: 'scale(1.05)',
								backgroundColor:'#fff',
								color:'#196AEB',
								backgroundColor:'#F2F6FD'
								
							}"
							:inactiveStyle="{
								color: '#606266',
								transform: 'scale(1)',
								backgroundColor:'#fff',
								
							}"
							itemStyle="textAlign:center; marginRight:30rpx; borderRadius:7rpx; width: '47rpx'; height: 34px; textAlign:center;border:1rpx solid #196AEB" ></u-tabs>
			</view>
			<view class="time" @click="open">
				<image class="imgae" src="../../static/shaixuan.png" mode="widthFix"></image>
				 <u-datetime-picker
						:show="show"
						v-model="value1"
						mode="year-month"
						@confirm="confirm"
						@cancel="cancel"
						@change="change"
						@close="close"
						
						
				></u-datetime-picker><view class="riqi">{{value1}}</view>
				<!-- <u-button @click="open" style="background-color: #f7f7f7; border: 0;">{{value1}}</u-button> -->
			</view>
		</view>
		<view class="order">
			<view class="opt" v-for="(item,i) of 3" :key="i">
				<view class="awy">
					<view class="le">订单退款</view>
					<view class="rig">+88</view>
				</view>
				<view class="dataTime">
					01月23日  17:28
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const d = new Date()
			const year = d.getFullYear()
			let month = uni.$u.padZero(d.getMonth() + 1)
			const date = d.getDate()
			return {
				
				list1:[
					{
						name:'全部'
					},
					{
						name:'提现'
					},
					{
						name:'退款'
					},
				],
				list:[
					{}
				],
				 show: false,
			     value1: '请选择日期',
			};
			
		},
		methods:{
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			withdraw(){
				uni.navigateTo({
					url:('/pages/index/withdraw')
				})
			},
			confirm(e) {
				const  that = this
				that.show = false
				that.result(e.value, e.mode)
				that.value1 = Number(new Date(e.value))
				console.log('确定',e,that.value1)
				
				// const timestamp = e.value; // 示例时间戳
				
				// // 创建一个 Date 对象，参数为时间戳
				// const date = new Date(timestamp);
				
				// // 使用 Date 对象提供的方法获取对应的年、月、日、小时、分钟和秒
				// const year = date.getFullYear();
				// const month = date.getMonth() + 1; // 月份从0开始，所以需要加1
				// that.value1 = `${year}-${month}`
				// console.log(222,that.value1)
			},
			change(e) {
				// console.log('change', e)
			},
			cancel(){
				console.log(333)
				this.show = false
			},
			// 选择的结果
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				switch (mode) {
					case 'datetime':
						return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'))
					case 'date':
						return toast(timeFormat(time, 'yyyy-mm-dd'))
					case 'year-month':
						return toast(timeFormat(time, 'yyyy-mm'))
					case 'time':
						return toast(time)
					default:
						return ''
				}
			},
		}
	}
</script>

<style lang="scss">
	.head{
		width: 697rpx;
		height: 267rpx;
		background: linear-gradient(0deg, #729DE2, #1A69E7);
		border-radius: 20rpx;
		padding: 45rpx;
		color: #fff;
		position: relative;
	}
	.balance{
		font-weight: 500;
		font-size: 21rpx;
		color: #A7C3EF;
	}
	.number{
		font-weight: bold;
		font-size: 47rpx;
		color: #FFFFFF;
		margin-top: 22rpx;
		margin-bottom: 50rpx;
	}
	.line{
		width: 697rpx;
		height: 1rpx;
		background: #7CA5E5;
	}
	.tal{
		font-weight: 500;
		font-size: 24rpx;
		color: #AFC8EF;
		margin-top: 35rpx;
	}
	.tixian{
		position: absolute;
		left: 550rpx;
		top: 60rpx;
		width: 113rpx;
		height: 53rpx;
		background: #7DA6E6;
		border-radius: 13rpx;
		border: 1px solid #8BB0EA;
		text-align: center;
		line-height: 53rpx;
		font-weight: bold;
		font-size: 27rpx;
		color: #FFFFFF;
	}
	.select{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		
	}
	.time{
		display: flex;
		
	}
	.riqi{
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		margin-top: 20rpx;
	}
	.imgae{
		width: 40rpx;
		height: 45rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
	}
	.order{
		background-color: #f7f7f7;
	}
	.opt{
		padding: 27rpx 32rpx;
		
		margin: 20rpx 0;
		
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.awy{
		display: flex;
		justify-content: space-between;
		// width: 109rpx;
		// height: 25rpx;
		// font-family: PingFang SC;
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		margin-bottom: 24rpx;
		.rig{
			font-weight: bold;
			font-size: 29rpx;
			color: #333333;
		}
		
	}
	.dataTime{
		font-weight: 500;
		font-size: 21rpx;
		color: #999999;
	}
</style>
